<template>
  <a-card :bordered="false">
    <h3>伯俊券延长工具</h3>
    <boCouponExtensionFilter
      ref="indexFilter"
      @onSearch="onSearch"></boCouponExtensionFilter>
    <s-table
      ref="table"
      size="default"
      bordered
      :rowKey="record => record.id"
      :columns="columns"
      :data="loadData"
      :pagination="paginationProps"
      :scroll="{ x: 1300 }"
    >
      <span slot="voucherType" slot-scope="text, record, index">
        <span v-if="record.voucherType == 1">满减券</span>
        <span v-if="record.voucherType == 2">折扣券</span>
      </span>
      <span slot="delayType" slot-scope="text, record, index">
        <span v-if="record.delayType == 1">优惠券号</span>
        <span v-if="record.delayType == 2">券规则</span>
      </span>
      <span slot="action" slot-scope="record">
        <a @click="handleRecord(record.id)">明细</a>
        <a-divider type="vertical" />
         <a @click="handleOpenDelay(record)">延期</a>
          <!-- <a v-else style="color: #666;">延期</a> -->
        <a-divider type="vertical" v-if="record.sendType == 2 || record.sendType == 3" />
        <a @click="handlePrint(record.id)" v-if="record.sendType == 2 || record.sendType == 3">补打印</a>
        <a-divider type="vertical" v-if="record.sendType == 2" />
        <a @click="handleOpenTemplatModal(record.id)" v-if="record.sendType == 2">领券模版</a>
        <a-divider type="vertical"/>
        <a @click="handleOpenCancel(record)">作废</a>
        <a-divider type="vertical"/>
        <a @click="handleOpenLog(record.id)">日志</a>
      </span>
    </s-table>
  </a-card>
</template>
<script>
  import { delayRecord } from '@/api/marketingCenter/boCouponExtension'
  import { STable } from '@/views/box/components'
  import boCouponExtensionFilter from '../components/boCouponExtensionFilter.vue'
  import qs from 'qs'
  import { mapGetters } from 'vuex'
  const columns = [
    {
      title: '编号',
      width: 100,
      align: 'center',
      dataIndex: 'id'
    },
    {
      title: '延期类型',
      width: 100,
      align: 'center',
      scopedSlots: { customRender: 'delayType' }
    },
    {
      title: 'AWARDID',
      width: 100,
      align: 'center',
      dataIndex: 'awardId'
    },
    {
      title: '券号',
      width: 180,
      align: 'center',
      dataIndex: 'voucherNo'
    },
    {
      title: '券类型',
      width: 100,
      align: 'center',
      scopedSlots: { customRender: 'voucherType' }
    },
    {
      title: '券名称',
      width: 150,
      align: 'center',
      dataIndex: 'voucherName'
    },
    {
      title: '面额',
      width: 100,
      align: 'center',
      dataIndex: 'voucherAmt'
    },
    {
      title: '折扣',
      width: 100,
      align: 'center',
      dataIndex: 'voucherDiscount'
    },
    {
      title: '延期原因',
      width: 300,
      align: 'center',
      dataIndex: 'remark'
    },
    {
      title: '延期后有效期',
      width: 180,
      align: 'center',
      dataIndex: 'delayDate'
    },
    {
      title: '操作时间',
      width: 180,
      align: 'center',
      dataIndex: 'createDate'
    },
    {
      title: '操作人',
      width: 100,
      align: 'center',
      dataIndex: 'workerName'
    }
  ]
  export default {
    components: {
      boCouponExtensionFilter,
      STable
    },
    data() {
      return {
        pageId: '',
        logPagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showTotal: total => `共有 ${total} 条数据`
        },
        logData: [{
          id: 1
        }],
        visibleLog: false,
        visibleCancel: false,
        current: 1,
        size: 10,
        couponId: '',
        oaList: [],
        record: {},
        issueConfirmFlag: false,
        visible: false,
        visibleTemplat: false,
        visibleTemplatOne: false,
        visibleDelay: false,
        issueForm: {
          sendType: 1,
          department: '',
          season: 1
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        visibleIssue: false,
        issueRules: {
          season: [{ required: true, message: '请选择', trigger: 'change' }],
          department: [{ required: true, message: '请选择', trigger: 'change' }],
          sendType: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        columns,
        paginationProps: {
          total: 0,
          showTotal: total => `共有 ${total} 条数据`
          // onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize)
        },
        queryParam: {},
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          const data = {
            ...this.queryParam,
            current: parameter.pageNo,
            size: parameter.pageSize
          }
          this.current = parameter.pageNo
          this.size = parameter.pageSize
          return delayRecord(data).then(res => {
            if (res.code === 200) {
              const { records, total, current, size, pages } = res.data
              const data = {
                page: {
                  count: total,
                  pageNo: current,
                  pageSize: size,
                  pages
                },
                data: records
              }
              return data
            } else {
              this.$message.error(res.msg || res.message)
              const data = {
                page: {
                  count: 0,
                  pageNo: 0,
                  pages: 0
                },
                data: []
              }
              return data
            }
          })
        }
      }
    },
    created() {
      // this.getOaList()
      console.log(this.userInfo(), 'userinfo')
    },
    computed: {
    },
    mounted() {
    },
    watch: {
    },
    methods: {
      ...mapGetters(['nickname', 'avatar', 'userInfo']),

      //查询
      onSearch(obj) {
        this.queryParam = obj
        this.$refs.table.refresh(true)
      },

      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      }
    }
  }
</script>
<style lang="less" scoped>
  .show-img {
    display: block;
    width: 100%;
  }

  .details-wrapper {
    display: flex;
    padding-bottom: 40px;

    .main-img {
      display: block;
      width: 40%;
    }

    .text {
      flex: 1;
      margin-left: 10%;
      line-height: 35px;
      font-size: 14px;
    }
  }

  .id-wrapper {
    font-size: 12px;
    text-align: center;

    span {
      color: #999;
    }
  }

  .product-img {
    font-size: 12px;

    .img-item {
      display: inline-block;
      vertical-align: middle;
      margin: 0 5px;
      text-align: center;
    }
  }

  .time {
    font-size: 12px;
    color: #999;
  }

  .img {
    display: block;
    margin: 2px auto;
    width: 60px;
    height: 60px;
    border: 1px dashed #f5f5f5;
    object-fit: scale-down;
    cursor: pointer;
  }
</style>
